<template>
  <div class="product-detail-container">
    <div v-loading="loading" class="product-detail-wrapper">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/products' }">商品列表</el-breadcrumb-item>
          <el-breadcrumb-item>商品详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div><br>

      <el-card class="product-detail-card" v-if="product">
        <div class="product-content">
          <!-- 商品图片 -->
          <div class="product-images">
            <el-image :src="getProductImage(product)" fit="cover" class="main-image">
              <template #error>
                <div class="image-error">
                  <el-icon>
                    <Picture />
                  </el-icon>
                  <span>图片加载失败</span>
                </div>
              </template>
            </el-image>

            <!-- 商品标签 -->
            <div class="product-tags">
              <el-tag v-if="product.isBargain" type="warning" size="small">可砍价</el-tag>
              <el-tag v-if="product.oldLevel" type="info" size="small">{{ getOldLevelText(product.oldLevel) }}</el-tag>
              <!-- <el-tag :type="getStatusType(product.status)" size="small">
                {{ getStatusText(product.status) }}
              </el-tag> -->
            </div>
          </div>

          <!-- 商品信息 -->
          <div class="product-info">
            <h1 class="product-title">{{ product.name }}</h1>

            <div class="product-price">
              <span class="current-price">¥{{ product.price }}</span>
              <!-- <span class="original-price" v-if="product.originalPrice && product.originalPrice > product.price">
                ¥{{ product.originalPrice }}
              </span> -->
            </div>

            <!-- <div class="product-stats">
              <span class="stat-item">
                <el-icon><View /></el-icon>
                浏览量: {{ product.views || 0 }}
              </span>
              <span class="stat-item">
                ❤️ 点赞: {{ product.likes || 0 }}
              </span>
            </div> -->

            <div class="product-meta">
              <div class="meta-item">
                <span class="label">卖家：</span>
                <span class="owner-name">{{ maskUserName(userInfoMap.get(product.userId)?.userName ||
                  userInfoMap.get(product.userId)?.userAccount || '未知用户') }}</span>
              </div>
              <!-- <div class="meta-item">
                <span class="label">位置：</span>
                <span class="value">{{ product.location || '未知' }}</span>
              </div> -->
              <div class="meta-item">
                <span class="label">库存：</span>
                <span class="value" :class="{ 'low-stock': !product.inventory || product.inventory <= 0 }">
                  {{ product.inventory || 0 }}件
                </span>
              </div>
              <div class="meta-item">
                <span class="label">发布时间：</span>
                <span class="value">{{ formatTime(product.createTime) }}</span>
              </div>
            </div>

            <div class="product-actions">
              <el-button type="primary" size="large" @click="handleBuy" class="buy-btn"
                :disabled="!product.inventory || product.inventory <= 0">
                {{ getBuyButtonText() }}
              </el-button>
              <el-button size="large" @click="handleFavorite" class="favorite-btn">
                <el-icon>
                  <Star />
                </el-icon>
                {{ isFavorited ? '已收藏' : '收藏' }}
              </el-button>
            </div>
          </div>
        </div>

        <!-- 商品描述 -->
        <div class="product-description">
          <h3>商品描述</h3>
          <div class="description-content">
            <p>{{ product.detail || '暂无详细描述' }}</p>
          </div>
        </div>

        <!-- 评论区域 -->
        <div class="comments-section">
          <h3>商品评论 ({{ comments.length }})</h3>

          <!-- 发表评论 -->
          <div class="comment-form" v-if="userStore.isLoggedIn">
            <el-input v-model="newComment" type="textarea" :rows="3" placeholder="写下您的评论..." maxlength="500"
              show-word-limit />
            <div class="comment-actions">
              <el-button type="primary" @click="handleSubmitComment" :loading="submittingComment"
                :disabled="!newComment.trim()">
                发表评论
              </el-button>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list" v-if="comments.length > 0">
            <div v-for="comment in comments" :key="comment.id" class="comment-item">
              <!-- 主评论 -->
              <div class="comment-main">
                <div class="comment-avatar">
                  <el-avatar :src="comment.userAvatar" :size="40">
                    {{ maskUserName(comment.userName)?.charAt(0) }}
                  </el-avatar>
                </div>
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="comment-author">{{ maskUserName(comment.userName) }}</span>
                    <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
                  </div>
                  <div class="comment-text">{{ comment.content }}</div>
                  <div class="comment-actions">
                    <el-button type="text" size="small" @click="handleReply(comment)" v-if="userStore.isLoggedIn">
                      回复
                    </el-button>
                    <el-button type="text" size="small" @click="handleUpvote(comment)"
                      :class="{ 'liked': commentLikeStatus.get(comment.id) }" class="like-btn">
                      <span class="like-icon">{{ commentLikeStatus.get(comment.id) ? '❤️' : '👍' }}</span>
                      {{ comment.upvoteList || 0 }}
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 回复输入框 -->
              <div class="reply-form" v-if="replyingTo === comment.id">
                <el-input v-model="replyContent" type="textarea" :rows="2" placeholder="写下您的回复..." maxlength="300"
                  show-word-limit />
                <div class="reply-actions">
                  <el-button type="primary" size="small" @click="handleSubmitReply(comment)" :loading="submittingReply"
                    :disabled="!replyContent.trim()">
                    回复
                  </el-button>
                  <el-button size="small" @click="cancelReply">
                    取消
                  </el-button>
                </div>
              </div>

              <!-- 子评论 -->
              <div class="comment-replies" v-if="comment.children && comment.children.length > 0">
                <div v-for="reply in comment.children" :key="reply.id" class="reply-item">
                  <div class="reply-avatar">
                    <el-avatar :src="reply.userAvatar" :size="32">
                      {{ maskUserName(reply.userName)?.charAt(0) }}
                    </el-avatar>
                  </div>
                  <div class="reply-content">
                    <div class="reply-header">
                      <span class="reply-author">{{ maskUserName(reply.userName) }}</span>
                      <span class="reply-time">{{ formatTime(reply.createTime) }}</span>
                    </div>
                    <div class="reply-text">{{ reply.content }}</div>
                    <div class="reply-actions">
                      <el-button type="text" size="small" @click="handleUpvote(reply)"
                        :class="{ 'liked': commentLikeStatus.get(reply.id) }" class="like-btn">
                        <span class="like-icon">{{ commentLikeStatus.get(reply.id) ? '❤️' : '👍' }}</span>
                        {{ reply.upvoteList || 0 }}
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 暂无评论 -->
          <div class="no-comments" v-else>
            <el-empty description="暂无评论，快来发表第一条评论吧！" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Picture, View, Star } from '@element-plus/icons-vue'
import { Product } from '@/types'
import { useUserStore } from '@/stores/user'
import dayjs from 'dayjs'
import { useProductStore } from '@/stores/product'
import { getOldLevelText, maskUserName } from '@/utils/product'
import request from '@/utils/request'
import axios from 'axios'
const userInfoMap = ref<Map<number, any>>(new Map())
const route = useRoute()

const router = useRouter()
const productStore = useProductStore()
const userStore = useUserStore()

const product = ref<Product | null>(null)
const loading = ref(false)
const isFavorited = ref(false)

// 评论相关
const comments = ref<any[]>([])
const newComment = ref('')
const submittingComment = ref(false)
const replyingTo = ref<number | null>(null)
const replyContent = ref('')
const submittingReply = ref(false)
// 存储每个评论的点赞状态
const commentLikeStatus = ref<Map<number, boolean>>(new Map())

// 测试函数：切换点赞状态（用于调试）
const testToggleLike = (commentId: number) => {
  const currentStatus = commentLikeStatus.value.get(commentId) || false
  const newStatus = !currentStatus
  commentLikeStatus.value.set(commentId, newStatus)
  console.log(`测试切换评论${commentId}的点赞状态: ${currentStatus} -> ${newStatus}`)
}

const formatTime = (time: string) => {
  if (!time) return '未知时间'
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}


// 获取用户信息
const fetchUserInfo = async (userId: number) => {
  if (userInfoMap.value.has(userId)) {
    return userInfoMap.value.get(userId)
  }

  try {
    const userInfo = await userStore.getUserById(userId)
    if (userInfo) {
      userInfoMap.value.set(userId, userInfo)
    }
    return userInfo
  } catch (error) {
    console.error('获取用户信息失败:', error)
    return null
  }
}

// 处理商品图片
const getProductImage = (product: Product) => {
  if (product.coverList && product.coverList.length > 0) {
    return product.coverList
  }
  return '/placeholder.svg'
}

// 获取状态类型
// const getStatusType = (status: number) => {
//   switch (status) {
//     case 0: return 'info'
//     case 1: return 'success'
//     case 2: return 'warning'
//     default: return 'info'
//   }
// }

// 获取状态文本
// const getStatusText = (status: number) => {
//   switch (status) {
//     case 0: return '下架'
//     case 1: return '在售'
//     case 2: return '已售'
//     default: return '未知'
//   }
// }

const handleBuy = () => {
  // 检查用户是否已登录
  if (!userStore.user || !userStore.user.username) {
    ElMessage.error('请先登录')
    router.push('/login')
    return
  }

  // 检查商品是否存在
  if (!product.value) {
    ElMessage.error('商品信息不存在')
    return
  }

  // 检查库存
  if (!product.value.inventory || product.value.inventory <= 0) {
    ElMessage.warning('商品库存不足，无法购买')
    return
  }

  // 跳转到支付页面，传递商品信息
  router.push({
    path: '/payment',
    query: {
      productId: product.value.id.toString(),
      productName: product.value.name,
      price: product.value.price.toString(),
      sellerId: product.value.userId.toString()
    }
  })
}

// 获取购买按钮文本
const getBuyButtonText = () => {
  if (!product.value) return '立即购买'
  if (!product.value.inventory || product.value.inventory <= 0) {
    return '库存不足'
  }
  return '立即购买'
}

// 获取评论点赞状态
const checkCommentLikeStatus = async (commentId: number) => {
  if (!userStore.user || !userStore.user.username) {
    return false
  }

  try {
    console.log('检查点赞状态，评论ID:', commentId, '用户名:', userStore.user.username)

    // 尝试使用axios直接调用，避免响应拦截器的处理
    const response = await axios.get('/api/commentlike/status', {
      params: {
        commentId: commentId,
        userName: userStore.user.username
      },
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
      }
    })

    console.log('点赞状态原始响应:', response)

    // 直接返回响应数据，不经过拦截器处理
    return response.data || false
  } catch (error: any) {
    console.error('获取点赞状态失败:', error)
    console.error('错误详情:', {
      status: error.response?.status,
      statusText: error.response?.statusText,
      data: error.response?.data
    })
    // 如果获取状态失败，默认返回false（未点赞）
    return false
  }
}

// 加载评论
const loadComments = async () => {
  if (!product.value) return

  try {
    const response = await request.get('/evaluations/comList', {
      params: { productId: product.value.id }
    })
    console.log(response.data);

    if (response.data) {
      comments.value = response.data || []

      // 尝试加载评论点赞状态
      if (userStore.user && userStore.user.username) {
        console.log('开始加载评论点赞状态，评论数量:', comments.value.length)

        // 首先初始化所有状态为false，确保功能可用
        for (const comment of comments.value) {
          commentLikeStatus.value.set(comment.id, false)
          if (comment.children && comment.children.length > 0) {
            for (const reply of comment.children) {
              commentLikeStatus.value.set(reply.id, false)
            }
          }
        }

        // 然后尝试获取真实状态
        for (const comment of comments.value) {
          try {
            const isLiked = await checkCommentLikeStatus(comment.id)
            commentLikeStatus.value.set(comment.id, isLiked)

            // 也检查子评论的点赞状态
            if (comment.children && comment.children.length > 0) {
              for (const reply of comment.children) {
                try {
                  const replyIsLiked = await checkCommentLikeStatus(reply.id)
                  commentLikeStatus.value.set(reply.id, replyIsLiked)
                } catch (error) {
                  console.error(`获取回复${reply.id}点赞状态失败:`, error)
                  // 保持默认的false状态
                }
              }
            }
          } catch (error) {
            console.error(`获取评论${comment.id}点赞状态失败:`, error)
            // 保持默认的false状态
          }
        }
        console.log('评论点赞状态加载完成，状态Map:', commentLikeStatus.value)
      }
    }
  } catch (error) {
    console.error('加载评论失败:', error)
  }
}

// 发表评论
const handleSubmitComment = async () => {
  if (!newComment.value.trim() || !product.value) return

  try {
    submittingComment.value = true

    // 检查用户是否已登录
    if (!userStore.user || !userStore.user.username) {
      ElMessage.error('请先登录')
      return
    }

    // 先获取用户ID
    let commenterId = null
    try {
      const userResponse = await request.get('/user/getByUserName', {
        params: { userName: userStore.user.username }
      })
      console.log(userResponse.data.userId);
      if (userResponse.data && userResponse.data.userId) {
        commenterId = userResponse.data.userId
      } else {
        throw new Error('无法获取用户ID')
      }
    } catch (userError) {
      console.error('获取用户ID失败:', userError)
      ElMessage.error('获取用户信息失败，请重试')
      return
    }

    const response = await request.post('/evaluations/save', {
      productId: product.value.id,
      content: newComment.value,
      contentType: 'product',
      commenterId: commenterId,
      fatherId: 0, // 一级评论
      upvoteList: 0
    })

    if (response.data) {
      ElMessage.success('评论发表成功！')
      newComment.value = ''
      await loadComments() // 重新加载评论（包括点赞状态）
    } else {
      ElMessage.error(response.data?.message || '评论发表失败')
    }
  } catch (error: any) {
    console.error('发表评论失败:', error)
    ElMessage.error('评论发表失败，请重试')
  } finally {
    submittingComment.value = false
  }
}

// 回复评论
const handleReply = (comment: any) => {
  replyingTo.value = comment.id
  replyContent.value = ''
}

// 取消回复
const cancelReply = () => {
  replyingTo.value = null
  replyContent.value = ''
}

// 提交回复
const handleSubmitReply = async (comment: any) => {
  if (!replyContent.value.trim() || !product.value) return

  try {
    submittingReply.value = true

    // 检查用户是否已登录
    if (!userStore.user || !userStore.user.username) {
      ElMessage.error('请先登录')
      return
    }

    // 先获取用户ID
    let commenterId = null
    try {
      const userResponse = await request.get('/user/getByUserName', {
        params: { userName: userStore.user.username }
      })
      if (userResponse.data && userResponse.data.userId) {
        commenterId = userResponse.data.userId
      } else {
        throw new Error('无法获取用户ID')
      }
    } catch (userError) {
      console.error('获取用户ID失败:', userError)
      ElMessage.error('获取用户信息失败，请重试')
      return
    }

    const response = await request.post('/evaluations/save', {
      productId: product.value.id,
      content: replyContent.value,
      contentType: 'product',
      commenterId: commenterId,
      fatherId: comment.id, // 回复评论的父评论ID
      upvoteList: 0
    })

    if (response.data) {
      ElMessage.success('回复发表成功！')
      cancelReply()
      await loadComments() // 重新加载评论（包括点赞状态）
    } else {
      ElMessage.error(response.data?.message || '回复发表失败')
    }
  } catch (error: any) {
    console.error('发表回复失败:', error)
    ElMessage.error('回复发表失败，请重试')
  } finally {
    submittingReply.value = false
  }
}

// 点赞/取消点赞评论
const handleUpvote = async (comment: any) => {
  if (!userStore.user || !userStore.user.username) {
    ElMessage.error('请先登录')
    router.push('/login')
    return
  }

  try {
    const currentLikeStatus = commentLikeStatus.value.get(comment.id) || false
    console.log('点赞操作，评论ID:', comment.id, '当前状态:', currentLikeStatus)

    const response = await request.post('/commentlike/toggle', null, {
      params: {
        id: comment.id,
        userName: userStore.user.username
      }
    })

    console.log('点赞切换响应:', response)

    // 检查请求是否成功
    if (response) {
      // 切换本地状态
      const newLikeStatus = !currentLikeStatus
      commentLikeStatus.value.set(comment.id, newLikeStatus)

      // 更新点赞数量和提示
      if (newLikeStatus) {
        // 变为点赞状态
        comment.upvoteList = (comment.upvoteList || 0) + 1
        //ElMessage.success('点赞成功！')
      } else {
        // 变为未点赞状态
        comment.upvoteList = Math.max((comment.upvoteList || 0) - 1, 0)
        //ElMessage.success('取消点赞成功！')
      }

      console.log('点赞状态已更新:', {
        commentId: comment.id,
        oldStatus: currentLikeStatus,
        newStatus: newLikeStatus,
        upvoteCount: comment.upvoteList
      })
    } else {
      ElMessage.error('操作失败')
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
    ElMessage.error('操作失败，请重试')
  }
}


// 检查收藏状态
const checkFavoriteStatus = async () => {
  if (!product.value || !userStore.user) return
  try {
    // 直接使用axios避免响应拦截器的问题
    const response = await axios.get('/api/interaction/judgment', {
      params: {
        userName: userStore.user.username,
        productId: product.value.id,
      }
    })
    isFavorited.value = response.data
    console.log('设置收藏状态为:', isFavorited.value)
  } catch (error) {
    console.error('检查收藏状态失败:', error)
    isFavorited.value = false
  }
}

//商品收藏与取消收藏
const handleFavorite = async () => {
  if (!product.value) return

  try {
    if (isFavorited.value) {
      //await productStore.unfavoriteProduct(product.value.id)
      await request.delete('/interaction/delete', {
        params: {
          userName: userStore.user!.username,
          productId: route.params.id,
          type: 1,
        }
      })
      ElMessage.success('取消收藏成功')
      isFavorited.value = false
    } else {
      //添加商品
      //await productStore.favoriteProduct(product.value.id)
      await request.post('/interaction/collect', null, {
        params: {
          userName: userStore.user!.username,
          productId: product.value.id,
        }
      })
      ElMessage.success('收藏成功')
      isFavorited.value = true
    }
  } catch (error: any) {
    ElMessage.error(error.message || '操作失败')
  }
}

const loadProductDetail = async () => {
  loading.value = true
  try {
    const productId = Number(route.params.id)
    console.log('加载商品详情，ID:', productId)

    // 尝试从API获取商品详情
    try {
      //获取商品详情
      const result = await productStore.getProductDetail(productId)
      product.value = result
      console.log('成功加载商品详情:', result)
      // 为每个商品获取用户信息
      if (product.value && product.value.userId) {
        await fetchUserInfo(product.value.userId)
      }
    } catch (apiError: any) {
      console.log('API获取失败，使用默认数据:', apiError)
    }
  } catch (error: any) {
    console.error('加载商品详情失败:', error)
    ElMessage.error('获取商品详情失败')
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  await loadProductDetail()
  await checkFavoriteStatus()
  await loadComments() // 加载评论

  if (process.env.NODE_ENV === 'development') {
    (window as any).testToggleLike = testToggleLike
  }
})

</script>

<style scoped lang="scss">
.product-detail-container {
  padding: 32px 0;
  display: flex;
  justify-content: center;
  background: #f7f8fa;
  min-height: 100vh;
}

.product-detail-card {
  max-width: 1100px;
  margin: 0 auto;
  box-shadow: 0 6px 32px 0 rgba(0, 0, 0, 0.08), 0 1.5px 6px 0 rgba(0, 0, 0, 0.03);
  border-radius: 18px;
  border: none;
  background: #fff;
}

.product-content {
  display: flex;
  gap: 48px;
  margin-bottom: 40px;
}

.product-images {
  flex: 0 0 400px;
  background: #f3f6fa;
  border-radius: 12px;
  padding: 24px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-image {
  width: 100%;
  height: 400px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  background: #fff;
}

.product-tags {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-title {
  font-size: 28px;
  margin-bottom: 18px;
  color: #222;
  font-weight: 600;
}

.product-price {
  margin-bottom: 18px;
}

.current-price {
  font-size: 32px;
  color: #ff4d4f;
  font-weight: bold;
  margin-right: 10px;
}

.product-meta {
  margin-bottom: 24px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;

  .label {
    font-weight: 500;
    color: #666;
    min-width: 80px;
  }

  .value {
    color: #2c3e50;

    &.low-stock {
      color: #e74c3c;
      font-weight: 600;
    }
  }
}

.owner-name {
  font-weight: 500;
  color: #3a7afe;
}

.product-actions {
  display: flex;
  gap: 18px;
  margin-top: 18px;
}

.buy-btn {
  background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: box-shadow 0.2s;
  box-shadow: 0 2px 8px 0 rgba(255, 126, 95, 0.12);
}

.buy-btn:hover {
  background: linear-gradient(90deg, #feb47b 0%, #ff7e5f 100%);
  box-shadow: 0 4px 16px 0 rgba(255, 126, 95, 0.18);
}

.favorite-btn {
  background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: box-shadow 0.2s;
  box-shadow: 0 2px 8px 0 rgba(166, 193, 238, 0.10);
}

.favorite-btn:hover {
  background: linear-gradient(90deg, #feb47b 0%, #ff7e5f 100%);
  box-shadow: 0 4px 16px 0 rgba(166, 193, 238, 0.18);
}

.product-description {
  border-top: 1px solid #f0f0f0;
  padding-top: 24px;
  background: #f8fafc;
  border-radius: 12px;
  margin-top: 18px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.03);
}

.product-description h3 {
  margin-bottom: 12px;
  color: #222;
  font-size: 20px;
  font-weight: 600;
}

.description-content p {
  line-height: 1.7;
  color: #444;
  font-size: 16px;
}

/* 评论区域样式 */
.comments-section {
  margin-top: 40px;
  border-top: 1px solid #f0f0f0;
  padding-top: 30px;
}

.comments-section h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20px;
}

.comment-form {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.comment-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.comments-list {
  .comment-item {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;

    &:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
}

.comment-main {
  display: flex;
  gap: 12px;
}

.comment-avatar {
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 600;
  color: #2c3e50;
  font-size: 14px;
}

.comment-time {
  color: #999;
  font-size: 12px;
}

.comment-text {
  color: #333;
  line-height: 1.6;
  margin-bottom: 8px;
}

.comment-actions {
  display: flex;
  gap: 16px;

  .el-button {
    padding: 4px 8px;
    font-size: 12px;
  }

  .like-btn {
    transition: all 0.3s ease;

    .like-icon {
      margin-right: 4px;
    }

    &.liked {
      color: #e74c3c;
      background-color: rgba(231, 76, 60, 0.1);

      &:hover {
        background-color: rgba(231, 76, 60, 0.2);
      }
    }

    &:not(.liked) {
      &:hover {
        color: #409eff;
        background-color: rgba(64, 158, 255, 0.1);
      }
    }
  }
}

.reply-form {
  margin-top: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.reply-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.comment-replies {
  margin-top: 16px;
  padding-left: 20px;
  border-left: 2px solid #e8e8e8;
}

.reply-item {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 6px;

  &:last-child {
    margin-bottom: 0;
  }
}

.reply-avatar {
  flex-shrink: 0;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.reply-author {
  font-weight: 500;
  color: #2c3e50;
  font-size: 13px;
}

.reply-time {
  color: #999;
  font-size: 11px;
}

.reply-text {
  color: #333;
  line-height: 1.5;
  font-size: 13px;
  margin-bottom: 4px;
}

.reply-actions {
  .el-button {
    padding: 2px 6px;
    font-size: 11px;
  }

  .like-btn {
    transition: all 0.3s ease;

    .like-icon {
      margin-right: 2px;
    }

    &.liked {
      color: #e74c3c;
      background-color: rgba(231, 76, 60, 0.1);

      &:hover {
        background-color: rgba(231, 76, 60, 0.2);
      }
    }

    &:not(.liked) {
      &:hover {
        color: #409eff;
        background-color: rgba(64, 158, 255, 0.1);
      }
    }
  }
}

.no-comments {
  text-align: center;
  padding: 40px 0;
}

@media (max-width: 900px) {
  .product-content {
    flex-direction: column;
    gap: 24px;
  }

  .product-images {
    width: 100%;
    padding: 16px 0 0 0;
  }
}

@media (max-width: 600px) {
  .product-detail-card {
    max-width: 100%;
    border-radius: 0;
  }

  .product-content {
    gap: 12px;
  }

  .main-image {
    height: 220px;
  }

  .product-description {
    border-radius: 0;
    margin-top: 10px;
    padding-top: 12px;
  }

  .comment-main {
    flex-direction: column;
    gap: 8px;
  }

  .comment-replies {
    padding-left: 12px;
  }

  .reply-item {
    flex-direction: column;
    gap: 6px;
  }
}
</style>